<template>
    <div class="pageCon">
        <div v-show="titleNav" class="titleNav">{{ user_name }}
            <div @click="hrefOpen(true, 'wodexinxi')">
                <div>
                    <!-- 设置图标 -->
                    <van-icon name="setting" size="16px" />
                </div>
                <span>设置</span>
            </div>
        </div>
        <van-pull-refresh v-model="mainLoading" @refresh="getData('1')">
            <div class="header">
                <div class="user_info">
                    <div class="user_img">
                        <img :src="user_img" alt="" @error="errhandle">
                        <img class="gradeTip" v-if="myGrade == 4" src="../../assets/recharge/vip5.png" alt="">
                    </div>
                    <div class="user_name">{{ user_name }}</div>
                    <div class="setting" @click="hrefOpen(true, 'wodexinxi')">
                        <div>
                            <van-icon name="setting" size="16px" />
                        </div>
                        <span>设置</span>
                    </div>
                    <!-- 用户UID -->
                    <div class="user_id" :style="{ right: typesN.length <= 2 ? '12px' : '' }">UID:{{ user_id }}
                    </div>
                </div>
            </div>

            <div class="content">
                <!-- 我的订单开始 -->
                <div class="card">
                    <div class="title">我的订单</div>
                    <div class="my-list">
                        <div @click="hrefOpen(true, 'orderList', 9)">
                            <div class="my-list-icon">
                                <img src="../../assets/geren/icon/my_list_icon1.png" alt="">
                            </div>
                            <div class="my-list-title">全部</div>
                        </div>
                        <div @click="hrefOpen(true, 'orderList', 0)">
                            <div class="my-list-icon">
                                <span class="my-list-num" v-if="orderNum[0] != 0">{{ orderNum[0] }}</span>
                                <img src="../../assets/geren/icon/my_list_icon2.png" alt="">
                            </div>
                            <div class="my-list-title">待付款</div>
                        </div>
                        <div @click="hrefOpen(true, 'orderList', 1)">
                            <div class="my-list-icon">
                                <span class="my-list-num" v-if="orderNum[1] != 0">{{ orderNum[1] }}</span>
                                <img src="../../assets/geren/icon/my_list_icon3.png" alt="">
                            </div>
                            <div class="my-list-title">待发货</div>
                        </div>
                        <div @click="hrefOpen(true, 'orderList', 2)">
                            <div class="my-list-icon">
                                <span class="my-list-num" v-if="orderNum[2] != 0">{{ orderNum[2] }}</span>
                                <img src="../../assets/geren/icon/my_list_icon4.png" alt="">
                            </div>
                            <div class="my-list-title">待收货</div>
                        </div>
                        <div @click="hrefOpen(true, 'orderList', 3)">
                            <div class="my-list-icon">
                                <span class="my-list-num" v-if="orderNum[3] != 0">{{ orderNum[3] }}</span>
                                <img src="../../assets/geren/icon/my_list_icon5.png" alt="">
                            </div>
                            <div class="my-list-title">待评价</div>
                        </div>
                    </div>
                </div>
                <!-- 我的订单结束 -->
                <!--分享赚与邀请好友-->
                <!-- <div class="share-box clearfix">
                    <div class="share-left shareBox" @click="hrefOpen(true, 'stemCells/cell_index.html')">
                        <div class="share-text"><img class="icon"
                                src="../../assets/geren/geren/geren-distrubute.png" />健康自测</div>
                        <div class="share-money">健康自测<span>></span></div>
                    </div>
                    <div class="line line1"></div>
                    <div class="share-right" @click="hrefOpen(true, 'invite.html')">
                        <div class="share-text"><img class="icon" src="../../assets/geren/geren/gereh-share.png" />邀请好友
                        </div>
                        <div class="share-money">分享中肽悦享<span>></span></div>
                    </div>
                </div> -->

                <!--默认列表-->
                <div class="record-box">
                    <ul class="clearfix">
                        <li @click="hrefOpen(true, '/proHistory')">
                            <div>
                                <img class="record-pic" src="../../assets/geren/geren/geren-scan.png" />
                            </div>
                            <div class="record-text">历史浏览</div>
                        </li>
                        <li @click="hrefOpen(true, '/address')">
                            <div class="record-pic">
                                <img class="record-pic" src="../../assets/geren/geren/geren-addr.png" />
                            </div>
                            <div class="record-text">地址管理</div>
                        </li>
                        <li @click="hrefOpen(true, '/collect')">
                            <div class="record-pic">
                                <img class="record-pic" src="../../assets/geren/geren/geren-collect.png" />
                            </div>
                            <div class="record-text">我的收藏</div>
                        </li>
                        <!-- <li @click="hrefOpen(true, '/invite')">
                            <div class="record-pic">
                                <img class="record-pic" src="../../assets/geren/geren/geren-shop.png" />
                            </div>
                            <div class="record-text">邀请好友</div>
                        </li> -->
                    </ul>
                </div>

                <!-- 服务与工具结束 -->
                <div class="card padding12">
                    <!-- <div class="active" @click="hrefOpen(true, 'customer_service.html')">
                        <span>客服中心</span>
                        <van-icon class="arrow" name="arrow" />
                    </div> -->
                    <div class="active" @click="hrefOpen(true, '/about')">
                        <span>关于我们</span>
                        <van-icon class="arrow" name="arrow" />
                    </div>
                </div>
            </div>
        </van-pull-refresh>

        <div class="appNavBox">
            <div @click="toPage('/index')">
                <img src="../../assets/navIcon/home1.png" alt="">
                <span>首页</span>
            </div>
            <div @click="toPage('/luntan')">
                <img src="../../assets/navIcon/luntan1.png" alt="">
                <span>社区</span>
            </div>
            <div>
                <img src="../../assets/navIcon/geren2.png" alt="">
                <span>我的</span>
            </div>
        </div>



    </div>
</template>

<script>
import { getGeren, getUserStored } from '../../network/geren';
import { alPath } from "../../network/request";
import { listMain } from '../../network/recharge'

export default {
    name: 'HomeR',
    data() {
        return {
            alPath,
            noticeNum: 0,
            titleNav: false,
            isShow: true,
            activeNames: [],
            getProfile: '',
            mainLoading: false,
            user_name: '未登录',
            types: [], //我的服务
            typesN: [], //标签身份
            dayEnd: 0,
            orderNum: [0, 0, 0, 0], //订单数
            user_id: localStorage.userId == undefined ? 0 : localStorage.userId,
            isShowSelect: false,
            saleManList: [],
            shopList: [],
            departList: [],
            selectShop: 0,
            isShowShouSelect: false,//我的收益  选择身份

            isShowProductMonitoring: false,//是否显示 商品发货记录

            shop_id: localStorage.shopId,
            myGrade: 0,
            user_img: ''
        }
    },
    mounted() {

    },
    methods: {
        toPage(url) {
            this.$router.push(url)
        },


        hrefOpen: function (flag, page, status) {
            if (localStorage.userId == undefined) {
                this.$router.replace('/wxLogin')
                return
            }
            if (!flag) {
                mui.toast("您没有此功能权限！");
                return
            }
            if (status != '' || status != undefined) {
                localStorage.order_index = status;
            }
            this.$router.push(page)
        },



        getData: function (status) {
            if (localStorage.user != undefined) {
                this.user_img = this.alPath + 'zhonghui/user/' + JSON.parse(localStorage.user).userImg;
            }
            this.mainLoading = false


        },

        setInfos: function () {
            var user = localStorage.user;
            this.user_id = localStorage.userId == undefined ? 0 : localStorage.userId;
            this.shop_id = localStorage.shopId == undefined ? 1 : localStorage.shopId;
        },
        getMyTypeData() {
            listMain({
                userId: localStorage.userId,
                shopId: localStorage.shopId
            }).then(res => {
                if (res.flag) {
                    this.myGrade = res.data.userStored.vipGrade
                }
            })
        },
        errhandle: function () {
            this.user_img = require('../../assets/geren/timg.png')
        },


    },
    created() {
        if (localStorage.user != undefined) {
            this.user_img = this.alPath + 'zhonghui/user/' + JSON.parse(localStorage.user).userImg;
            this.user_name = JSON.parse(localStorage.user).userName
        }
        this.setInfos()
        this.getMyTypeData()
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}








</script>

<style lang='less' scoped>
.header {
    padding-top: 92px;
    position: relative;
    height: 360px;
    // box-sizing: border-box;
    color: #fff;
    background-color: #ed0a2b;
    border-radius: 0 0 40px 40px;
}

.user_name {
    position: absolute;
    width: 60%;
    font-size: 40px;
    font-weight: bold;
    line-height: 44px;
    padding-top: 12px;
    z-index: 3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.user_img {
    width: 120px;
    height: 120px;
    position: absolute;
    left: 32px;
    box-sizing: border-box;
}

.gradeTip {
    position: relative;
    top: -20px;
    width: 122px;
    height: 34px;
}


.user_img>img:nth-child(1) {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.setting {
    position: absolute;
    right: 24px;
    top: 24px;
    display: flex;
    align-items: center;
    height: 32px;
    font-size: 28px;
    z-index: 3;
}

.user_id {
    position: absolute;
    right: 84px;
    bottom: -4px;
    font-size: 24px;
    z-index: 444;
}

.setting>div:nth-child(1) {
    height: 32px;
}

.setting>span {
    font-size: 28px !important;
    height: 32px;
    line-height: 32px;
    padding-left: 8px;
}

.user_info {
    height: 120px;
    position: relative;
    padding-left: 178px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.money {
    display: flex;
    justify-content: flex-start;
    margin-top: 44px;
    padding: 0 24px 104px 24px;
    font-size: 32px;
}

.money>div {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.money img {
    height: 60px;
}

.content {
    margin-top: -168px;
    position: relative;
    padding: 0 24px 200px;
}

.card {
    background-color: #fff;
    position: relative;
    border-radius: 16px;
    margin-bottom: 24px;
}

.title {
    font-size: 32px;
    font-weight: bold;
    line-height: 36px;
    padding: 32px 24px;
}

.my-list {
    display: flex;
    justify-content: space-between;
}

.my-list-icon {
    position: relative;
}

.my-list-icon img {
    width: 44px;
    height: 44px;
}

.my-list>div {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 24px;
}

.my-list-title {
    font-size: 24px;
    line-height: 24px;
    color: #666;
    /* padding-top: 8px; */
    white-space: nowrap;
}

.server img {
    width: 48px;
    height: 48px;
}

.server {
    display: flex;
    flex-wrap: wrap;
}

.server>div {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.server>div>div {
    margin-bottom: 16px;
}

.active {
    position: relative;
    height: 88px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #f2f2f2;
}

.card-icon {
    position: absolute;
    display: inline-block;
    box-sizing: border-box;
    min-width: 32px;
    padding: 0 6px;
    color: #fff;
    font-weight: 500;
    font-size: 24px !important;
    font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
    line-height: 1.2;
    text-align: center;
    background-color: #ee0a24;
    border: 2px solid #fff;
    border-radius: 999px;
    left: 50%;
    top: 0;
    margin-left: 16px;
}

.padding12 {
    padding: 0 24px;
}

.active img {
    height: 28px;
    margin-right: 16px;
}

.arrow {
    position: absolute;
    right: 0;
    color: #666;
    font-size: 32px;
}

.my-list-num {
    position: absolute;
    right: -50%;
    top: -12px;
    display: inline-block;
    box-sizing: border-box;
    min-width: 32px;
    padding: 0 6px;
    color: #ee0a24;
    font-weight: 500;
    font-size: 24px !important;
    font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
    line-height: 1.2;
    text-align: center;
    background-color: #fff;
    border: 2px solid #ee0a24;
    border-radius: 999px;
}

.user_tag {
    position: relative;
    top: 60px;
    display: flex;
    align-items: center;
    position: relative;
    /* padding-right: 106px; */
}

.van-collapse {
    width: 100%;
    background-color: #ed0a2b;
}

.vip-icon {
    position: absolute;
    width: 40px;
    right: 0;
    bottom: 0;
}

.van-collapse-item .van-cell {
    /* background: linear-gradient(-45deg, #FF3B14, #f0593a); */
    background-color: #ed0a2b;
    color: #fff !important;
    padding-left: 0 !important
}

.van-collapse-item__content {
    padding: 0 !important;
    display: flex !important;
    line-height: 80px !important;
    flex-wrap: wrap !important;
    /* background: linear-gradient(-45deg, #FF3B14, #f0593a); */
    background-color: #ed0a2b;
}

.user_tag .user_tag_icon {
    background-color: #fff;
    color: #ff3b14;
    height: 36px;
    line-height: 36px;
    font-size: 24px;
    border-radius: 20px;
    padding: 0 16px;
    text-align: center;
    display: block;
    margin-right: 16px;
    text-align: center;
    z-index: 10;
}

[class*=van-hairline]::after {
    border: none !important;
}

.user_tag .van-cell::after {
    border: none !important;
}

.user_tag .van-icon {
    color: #fff !important;
}

.titleNav {
    position: fixed;
    width: 100%;
    height: 152px;
    /* background: linear-gradient(-45deg, #FF3B14, #EA654A); */
    background-color: #ed0a2b;
    color: #fff;
    top: 0;
    left: 0;
    z-index: 44;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    padding-top: 84px;
    box-sizing: border-box;
}

/* 上拉后 用户名 显示区域 */
.titleNav>div {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 24px;
    bottom: 24px;
    font-size: 24px;
    font-weight: 400;
}

/* 图标容器高度 */
.titleNav>div>div {
    height: 24px;
}

/* 上拉后设置图标和设置文字 */
.titleNav>div .van-icon,
.titleNav>div span {
    font-size: 24px !important;
    line-height: 24px;
}

/* 上拉后设置图标的定位 */
.titleNav>div .van-icon {
    position: absolute;
    top: 0px;
    right: 60px;
}

.nav-tab {
    position: fixed;
    width: 100%;
    z-index: 200;
    bottom: 0;
    left: 0;
    display: flex;
    height: 100px;
    background-color: #fff;
    color: #929292;
}

.nav-tab>div {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.nav-tab>div>div {
    font-size: 24px;
}

.mui-icon {
    font-size: 48px !important;
}

.nav-active {
    color: #ff3b14;
}

.ce {
    background-color: #929292;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    bottom: 20px;
    border: 14px solid #fff;
}

.ce img {
    width: 44px;
    height: 44px;
    display: block;
}

.red-dian {
    position: relative;
}

.red-dian::before {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    background-color: #ff3b14;
    right: 50%;
    margin-right: -24px;
    top: 16px;
}

/* ----分享---- */
.share-box {
    display: flex;
    justify-content: space-between;
    padding: 20px 34px;
    background-color: #FFFFFF;
    border-radius: 16px;
    margin-bottom: 20px;
    box-sizing: border-box
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ".";
    clear: both;
    height: 0;
}

.share-left,
.share-right {
    flex: 1;
}

.share-text {
    font-size: 28px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 26px;
}

.line {
    position: relative;
    left: 0px;
    width: 2px;
    height: 110px;
    background-color: #ccc;
}

.line1 {
    left: -20px;
}

.shareBox {
    padding-left: 34px;
}

.share-money {
    font-size: 24px;
    color: #999;
}

.share-money span {
    margin-left: 16px;
}

.icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    vertical-align: text-bottom;
    margin-right: 8px;
}

.record-box {
    padding: 20px 0;
    background-color: #FFFFFF;
    border-radius: 16px;
    margin-bottom: 20px;
}

.record-box>ul li {
    float: left;
    width: 25%;
    text-align: center;
    font-size: 24px;
    color: #333333;
}

.record-pic {
    display: inline-block;
    width: 82px;
    height: 82px;
    background-color: #ccc;
    border-radius: 50%;
    margin-bottom: 6px;
}

.server-lock {
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 4px;
    right: -8px;
}

.server-box {
    position: relative;
}



.selectBox {
    padding-bottom: 20px;
    position: relative;
    box-sizing: border-box;
    width: 500px;
    background-color: #fff;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    -ms-border-radius: 14px;
    -o-border-radius: 14px;
    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.5);
}

/* .selectBox>div:not(:first-child) {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 20px;
	border-bottom: 1px solid #ccc;
	font-size: 14px;
	color: #333;
}

.selectBox>div:last-child {
	border-bottom: none;
} */



.selectTop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 500px;
    height: 76px;
    background: #D23A3E;
    border-radius: 14px 14px 0px 0px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #FAFAFA;
}

.selectTop>div {
    margin: 0 28px;
    width: 12px;
    height: 4px;
    background: #FAFAFA;
    border-radius: 2px;
}

.selectMain {
    width: 100%;
    max-height: 368px;
    /* background-color: aqua; */
    overflow: scroll;
}

.selectItem {
    box-sizing: border-box;
    padding: 24px 28px;
    width: 100%;
    border-bottom: 2px dashed #eee;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.selectItem:last-child {
    border-bottom: 2px solid #eee;
}


.showBox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 445;
}

.closeBtn {
    font-size: 24px;
    color: #fff;
    position: absolute;
    top: 20px;
    right: 20px;
    border-bottom: none;
}

.shouyiIcon {
    margin-bottom: 4px;
    width: 56px !important;
    height: 56px !important;
}

.pageCon {
    height: 100vh;

    background: #f2f2f2;
}
</style>